<template>
  <div id="">
    <div class="banner">
    <swiper :options="swiperOption"  style="height:12rem;">
    <swiper-slide v-for="(items,index) in housePicList" :key="items.key">
    <img :src="items.housePic" alt="">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="jc"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: ['housePicList'],
  data: () => ({
    swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          type:'fraction'
        },
        autoplay:{
          delay: 3000,
        	disableOnInteraction: false,
        },
        paginationClickable: true,
        loop: true,
        onTouchEnd: function() {
            swiper.startAutoplay()
        }
     },
    // bannerImgList:[{
    //   imgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523856533113&di=a8aaf1333d96e7e2b641d5dbbcb2edbe&imgtype=0&src=http%3A%2F%2Fpic114.nipic.com%2Ffile%2F20161109%2F21050188_170253171000_2.jpg'
    // },{
    //   imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523856559938&di=6131ba5b6cefebc9378a70b2c1eb5ca7&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140419%2F0005018307715498_b.jpg'
    // },{
    //   imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523856580198&di=9f4d4b3d870645020748200998846a40&imgtype=0&src=http%3A%2F%2Fp3.gexing.com%2FG1%2FM00%2F95%2F2C%2FrBACFFPsoOmSqfDdAAII0V7jlbA954.jpg'
    // }]
  })
}
</script>
<style lang="scss" scoped>
@import "@/main.scss";
.banner .swiper-pagination-bullet{background:white;}
.banner .swiper-pagination-bullet-active{background:$lightColor;}
.banner{
  padding: 0;
  text-align: right;

  img{
    width: 100%;
    height: 14rem;
  }
}
</style>
